<template>
  <div class="app-container" style="background: rgb(248, 248, 248)">
    <div class="header">
      <span class="header-time">{{ currentTime }} </span>
    </div>

    <div
        class="timeline"
        style="height: 55vh; overflow-y: auto; overflow-x: hidden"
    >
      <div class="" v-for="(record, index) in records" :key="index">
        <span class="timeline-date">{{ record.createTime }}</span>
        <div class="timeline-item">
          
          <div style="width: 90%">
            <div class="timeline-item-header">
              <span class="timeline-date " style="font-size:18px">{{ record.title }}</span>
            </div>
            <div class="timeline-item-content">
              <span class="timeline-text" v-if="!record.isdelFun">{{
                  record.description
                }}</span>
              <span class="timeline-text" v-if="record.isdelFun">
                <input v-model="record.description" />
              </span>
            </div>
          </div>
          <div
              style="display: flex; align-items: center; cursor: pointer"
              @click="delFun(record)"
          >
            <svg t="1745030843474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9721" width="16" height="16"><path d="M298.666667 341.333333h384v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667zM170.666667 128h682.666666v554.666667h42.666667V106.517333c0-11.52-9.557333-21.184-21.333333-21.184H149.333333c-11.626667 0-21.333333 9.557333-21.333333 21.376v810.581334C128 929.066667 137.557333 938.666667 149.333333 938.666667h490.666667v-42.666667H170.666667V128z m469.333333 576.042667c0-11.797333 9.728-21.376 21.376-21.376H896L640 938.666667V704.042667z m153.002667 21.290666H682.666667v110.336L793.002667 725.333333z" fill="#3D3D3D" p-id="9722"></path></svg>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup name="moodIndex">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import {useRouter} from 'vue-router';
import { selectArticleList, addMood, updateMood, histogram } from "@/api/Login";
const currentTime = ref("2025-04-09 16:25:18 星期三");
const router = useRouter();
const currentCity = ref("");
const typeList = ref()
const mood = ref("2");
const moodText = ref("");
const isdelFun = ref(false);
const listss = ref([]);
const records = ref([
  // {
  //   time: "2025-01-25 08:42:10",
  //   location: "唐山市",
  //   mood: "微笑",
  //   text: "清晨的粥比夜晚的酒好喝，骗你的人比爱你的人会说",
  // },
  // {
  //   time: "2025-01-25 08:14:33",
  //   location: "唐山市",
  //   mood: "呲牙",
  //   text: "放假了",
  // },
  // {
  //   time: "2025-01-14 22:27:37",
  //   location: "北京市",
  //   mood: "微笑",
  //   text: "再见2024，你好2025",
  // },
  // {
  //   time: "2025-01-01 22:14:13",
  //   location: "西安市",
  //   mood: "微笑",
  //   text: "",
  // },
]);
const chartRef = ref(null);
const timeRange = ref("day");
function filterByTimeRange(data, range) {
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth();
  const currentDay = now.getDate();
  const firstDayOfWeek = new Date(now.setDate(now.getDate() - now.getDay()));
  const lastDayOfWeek = new Date(firstDayOfWeek);
  lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6);

  return data.filter((item) => {
    const createDate = new Date(item.creatTime);
    switch (range) {
      case "thisWeek":
        return createDate >= firstDayOfWeek && createDate <= lastDayOfWeek;
      case "thisMonth":
        return (
            createDate.getFullYear() === currentYear &&
            createDate.getMonth() === currentMonth
        );
      case "thisYear":
        return createDate.getFullYear() === currentYear;
      default:
        return false;
    }
  });
}

const initChart = (type) => {
  const chart = echarts.init(chartRef.value);
  typeList.value = type
  console.log(type);
  // const { xData, yData } = generateData(timeRange.value);
  let xData = [];
  let yData = [];
  let list = [];
  if (type == "thisWeek") {
    list = filterByTimeRange(listss.value, "thisWeek");
  }
  if (type == "thisMonth") {
    list = filterByTimeRange(listss.value, "thisMonth");
  }
  if (type == "thisYear") {
    list = filterByTimeRange(listss.value, "thisYear");
  }

  list.forEach((item) => {
    xData.push(item.creatTime);
    yData.push(item.moodIndex);
  });
  const option = {
    xAxis: {
      type: "category",
      data: xData,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: function (value) {
          // 根据数值范围返回对应的中文描述
          if (value === 0) {
            return "";
          }
          if (value === 1) {
            return "狂喜";
          } else if (value === 2) {
            return "开心";
          } else if (value === 3) {
            return "一般";
          } else if (value === 4) {
            return "伤心";
          } else if (value === 5) {
            return "难过";
          }
          return value;
        },
      },
    },
    series: [
      {
        data: yData,
        type: "line",
      },
    ],
  };
  chart.setOption(option);
};

const changeTimeRange = (range) => {
  timeRange.value = range;
  initChart();
};
const recordMood = () => {
  let data = {
    description: moodText.value,
    moodIndex: mood.value,
    userId: JSON.parse(sessionStorage.getItem("user")).id,
  };
  addMood(data).then((res) => {
    if (res.code == 200) {
      selectMoodFun();
    }
  });
};
const updateClock = () => {
  const now = new Date();

  // 获取年月日时分秒
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, "0");
  const day = now.getDate().toString().padStart(2, "0");
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  const seconds = now.getSeconds().toString().padStart(2, "0");

  // 格式化输出
  const time = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  currentTime.value = time;
};
const selectMoodFun = () => {
  let data = {
    // userId: JSON.parse(sessionStorage.getItem("user")).id,
  };
  selectArticleList(data).then((res) => {
    if (res.code == 200) {
      records.value = res.data;
    }
  });
};

const delFun = (val) => {
  // val.isdelFun = !val.isdelFun;
  router.push({
    path: `/particulars/`,
    query: { from: val.id },
  });

};
onMounted(() => {
  updateClock();
  selectMoodFun();
  setInterval(updateClock, 1000);

  histogram().then((res) => {
    let list = Object.keys(res.data);
    list.forEach((item) => {
      if (JSON.parse(sessionStorage.getItem("user")).userName == item) {
        listss.value = res.data[item];
        initChart("thisWeek");
      }
    });
  });
  const day = new Date().getDay(); // 返回0(周日)到6(周六)的数字
  const weekdays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  currentCity.value = weekdays[day];
});
</script>

<style scoped>
.app-container {
  font-family: Arial, sans-serif;
  background-color: #fff;
  line-height: 1.6;
  padding: 10px;
  height: 99vh;
  overflow: auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.header-time {
  font-size: 14px;
  color: #333;
}

.mood-input {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.mood-input select {
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.mood-input input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.mood-input button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #f4f4f4;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.access-data {
  margin: 10px 0;
}

.timeline {
  margin: 10px 0;
  padding-left: 20px;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #e0e0e0;
}

.timeline-item {
  margin-bottom: 10px;
  display: flex;
  padding: 10px;
  margin-left: 20px;
  background: #fff;
//background-color: #f9f9f9;
  border-radius: 5px;
  position: relative;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: -27px;
  width: 14px;
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 50%;
}

.timeline-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #777;
  margin-bottom: 5px;
}

.timeline-item-content {
  font-size: 14px;
  width: 100%;
  text-align: left;
  color: #333;
  padding-left: 20px;
}
.timeline-date {
  display: inline-block;
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
  margin-left: 20px;
}
</style>
